#{extends 'main.html' /}
#{set title:'Home' /}
#{set 'moreStyles'}
<link rel="stylesheet" media="screen" href="@{'/public/stylesheets/mainPages.css'}">
<link rel = "stylesheet" media = "screen" href = "@{'/public/stylesheets/myTripGmap.css'}">
#{/set}
<div class="mainContent">
<div id="succecsMessage">
      <span></span> 
 </div>
<div id ="mapContent" style ="width :370px; height:460px; background:red">
    
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</div>
<div id="cityContent">
	<div id="searchCityInput">
		<input id="searchTextField" type="search" size="50" placeholder="Anything you want!"/>
		<input type = "button" class =" buttonInput" id="buttonSearchInput" value = "Add Map" onclick = "codeAddress()"/>
	</div>
    <div id="citySearch">	
	    <div id="relatedCitiesList"></div>
	<div id ="mostCitiesList"></div>
    </div>
</div>
<div style="height:400px; width:300px"></div>
</div>
#{set 'moreScripts'} 


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBt7zoJK9vf2W3n1WxbXl5IyqYeCqadZzM&sensor=true"></script>
<script src ="@{'/public/javascripts/json2.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src ="@{'/public/javascripts/ApplicationConstants.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src ="@{'/public/javascripts/applicationRequest.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src ="@{'/public/javascripts/gmapUtil.js'}"  type = "text/javascript" charset="utf-8"></script>
<script src ="@{'/public/javascripts/mapCitySelect.js'}"  type = "text/javascript" charset="utf-8"></script>

<script type="text/javascript"  charset = "utf-8">
	$appRequest.requestUserId = ${currentUser.getFacebookID()}
    activeCurrentLink(0);
</script>

#{/set} 